import React, {Component} from 'react'
import { Input, Button, List } from 'antd';

class TodoListUI extends Component { // 这是个UI组件
    render() {
        return (
            <>
                <h1>helloworld</h1>
                <Input 
                onChange= {this.props.handleInputChange}
                value={this.props.inputValue} placeholder="todoinfo" style={{width: "300px",marginRight:"10px"}}
                />
                <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
                <List
                style={{width: "300px",marginTop:"10px"}}
                bordered
                dataSource={this.props.list}
                renderItem={(item, index) => (
                    <List.Item onClick={()=>{
                        this.props.handleItemDelete(index)
                    }}>
                    {item}
                    </List.Item>
                )}
                />
            </>
        )
    }
}

export default TodoListUI;